<!DOCTYPE html>
<html>
<head>
	<title>onyx modal group test</title>
	<script src="../../../../enyo/enyo.js" type="text/javascript"></script>
	<script src="../../../../lib/layout/package.js" type="text/javascript"></script>
	<script src="../../../../lib/onyx/package.js" type="text/javascript"></script>
	<script src="../../source/wip-package.js" type="text/javascript"></script>
	<style>
		.onyx-menu.picker {
			top: -2px;
			min-width: 0;
			/* FIXME: need to figure out size */
			/*width: 48px;*/
			width: 100%;
			box-sizing: border-box;
			color: black;
			background: #E1E1E1;
		}

		.picker > .onyx-menu-item {
			text-align: center;
		}

		.picker > .onyx-menu-item:hover {
			background: lightblue;
		}

		.picker > .onyx-menu-item {
			border-top: 1px solid silver;
		}

		.picker > .onyx-menu-item:first-child {
			border-top: none;
		}

		.floating {
			margin-top: 0;
		}

		.separator {
			display: block;
			border-bottom: 1px solid silver;
			margin-bottom: 50px;
		}
	</style>
</head>
<body class="onyx">
	<script>
		new (enyo.kind({
			name: "App",
			kind: "Control",
			components: [
				{kind: "Scroller", classes: "enyo-fit", components: [
					{classes: "onyx-toolbar-inline", components: [
						{kind: "onyx.Button", content: "Button", ontap: "buttonTap"},
						{kind: "onyx.InputDecorator", components: [
							{kind: "onyx.Input"}
						]},
						{kind: "onyx.Button", content: "Button", ontap: "buttonTap"}
					]},
					{classes: "separator"},
					{classes: "onyx-toolbar-inline", components: [
						{content: "Picker"},
						{kind: "onyx.MenuDecorator", components: [
							{name: "pickeree", content: "1"},
							{kind: "onyx.Menu", classes: "picker", onActivate: "pickerChange", picker: "pickeree", components: [
								{content: "1"},
								{content: "2"},
								{content: "3"}
							]}
						]},
					]},
					{classes: "separator"},
					{classes: "onyx-toolbar-inline", components: [
						{content: "Modal Group"},
						{name: "modalGroup", kind: "onyx.Popup", showing: true, autoDismiss: false, modal: true, onActivate: "groupActivate", onShow: "groupShow", onHide: "groupHide", ontap: "groupTap", style: "border: 1px solid black;", classes: "onyx-toolbar-inline", components: [
							{kind: "onyx.MenuDecorator", components: [
								{name: "pickeree2", content: "1"},
								{kind: "onyx.Menu", classes: "picker", captureEvents: false, onActivate: "pickerChange", picker: "pickeree2", components: [
									{content: "1"},
									{content: "2"},
									{content: "3"}
								]}
							]},
							{kind: "onyx.MenuDecorator", components: [
								{name: "pickeree3", content: "1"},
								{kind: "onyx.Menu", classes: "picker", captureEvents: false, onActivate: "pickerChange", picker: "pickeree3", components: [
									{content: "1"},
									{content: "2"},
									{content: "3"}
								]}
							]},
							{kind: "onyx.MenuDecorator", components: [
								{name: "pickeree4", content: "1"},
								{kind: "onyx.Menu", classes: "picker", captureEvents: false, onActivate: "pickerChange", picker: "pickeree4", components: [
									{content: "1"},
									{content: "2"},
									{content: "3"}
								]}
							]}
						]}
					]},
					{allowHtml: true, style: "padding: 10px;", content: "NOTES: The bordered \"modal group\" contains popups that do not capture events. The modal group's modality is set in response to changes in the showing state of its popups. " +
						"As long as one of its popups is open, it's capturing. (The modal group is currently itself an always showing popup, which is strange but could be addressed with refactoring.)"},
					{classes: "separator"},
					{classes: "onyx-toolbar-inline", components: [
						{content: "Picker (non-modal)"},
						{kind: "onyx.MenuDecorator", components: [
							{name: "pickeree5", content: "1"},
							{kind: "onyx.Menu", modal: false, classes: "picker", onActivate: "pickerChange", picker: "pickeree5", components: [
								{content: "1"},
								{content: "2"},
								{content: "3"}
							]}
						]},
						{tag: "br"},{tag: "br"},
						{content: "Picker (floating)"},
						{kind: "onyx.MenuDecorator", components: [
							{name: "pickeree6", content: "1"},
							{kind: "onyx.Menu", floating: true, classes: "picker floating", onActivate: "pickerChange", picker: "pickeree6", components: [
								{content: "1"},
								{content: "2"},
								{content: "3"}
							]}
						]}
					]},
					{style: "height: 1000px;"}
				]}
			],
			create: function() {
				this.inherited(arguments);
				this.$.modalGroup.removeClass("onyx-popup");
			},
			pickerChange: function(inSender, inEvent) {
				this.$[inSender.picker].setContent(inEvent.originator.getContent());
			},
			buttonTap: function() {
				this.log();
			},
			captureGroup: function(inGroup) {
					this.log();
					inGroup.captured = true;
					inGroup.capture();
			},
			releaseGroup: function(inGroup) {
				this.log();
				inGroup.captured = false;
				inGroup.release();
			},
			groupShow: function(inSender, inEvent) {
				//this.log(inEvent.originator.id);
				if (!inSender.captured) {
					this.captureGroup(inSender);
				}
				inSender.nextPicker = inEvent.originator;
				if (inSender.picker) {
					inSender.picker.hide();
				}
				inSender.picker = inSender.nextPicker;
				inSender.nextPicker = null;
			},
			groupHide: function(inSender, inEvent) {
				//this.log(inEvent.originator.id);
				if (!inSender.nextPicker) {
					inSender.picker = null;
					this.releaseGroup(inSender);
				}
			},
			groupTap: function(inSender, inEvent) {
				//this.log();
				var dt = inEvent.dispatchTarget;
				if (!dt.isDescendantOf(inSender)) {
					inSender.waterfallDown("onRequestHide");
				}
			}
		}))({fit: true}).write();
	</script>
</body>
</html>
